<template>
  <div class="muzi muzi-form">
    <el-form :model="form" :rules="rules" ref="FormHandle" v-loading="loading" label-width="145px">
      <muzi-divide name="基础信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name" required>
            <el-input v-model="form.name" disabled clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件类型" prop="type" required>
            <el-select v-model="form.type" placeholder="请选择证件类型" disabled>
              <el-option-group v-for="group in options.type" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="identity" :error="error.type" required>
            <el-input v-model="form.identity" @change="onIdentity" disabled clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex" required>
            <el-select v-model="form.sex" disabled placeholder="please select your zone">
              <el-option v-for="item in options.sex" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期" prop="birthday" required>
            <el-date-picker v-model="form.birthday" disabled type="date" placeholder="请选择出生日期" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="国籍(地区)" prop="nation">
            <el-input v-model="form.nation" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile" required>
            <el-input v-model="form.mobile" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="xl">
            <el-input v-model="form.xl" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="任职受雇从业信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="人员状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择人员状态">
              <el-option v-for="item in options.state" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入职年度就业情形" prop="jyqx">
            <el-select v-model="form.jyqx" placeholder="请选择入职年度就业情形">
              <el-option v-for="item in options.OccupationType" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任职受雇从业类型" prop="cylx">
            <el-input v-model="form.cylx" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职日期" prop="lzrq">
            <el-date-picker v-model="form.lzrq" type="date" placeholder="请选择离职日期" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="银行账户"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="开户银行" prop="khyh">
            <el-select v-model="form.khyh" placeholder="请选择开户银行">
              <el-option v-for="item in options.bank" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号" prop="yhzh">
            <el-input v-model="form.yhzh" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行省份" prop="khhsf">
            <el-select v-model="form.khhsf" placeholder="请选择开户行省份">
              <el-option v-for="item in options.province" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="投资信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="个人投资额" prop="grtze">
            <el-input v-model="form.grtze" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="个人投资比例(%)" prop="grtzbl">
            <el-input v-model="form.grtzbl" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="其他信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="是否残疾" prop="sfcj">
            <el-select v-model="form.sfcj" placeholder="请选择是否残疾">
              <el-option v-for="item in options.yesno" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="残疾证件类型" prop="cjzjlx">
            <el-select v-model="form.cjzjlx" placeholder="请选择">
              <el-option v-for="item in options.disabilityType" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否孤老" prop="sfgl">
            <el-select v-model="form.sfgl" placeholder="请选择">
              <el-option v-for="item in options.yesno" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否烈属" prop="sfls">
            <el-select v-model="form.sfls" placeholder="请选择">
              <el-option v-for="item in options.yesno" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="烈属证号" prop="lszh">
            <el-input v-model="form.lszh" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="联系方式（带 * 必填）"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="户籍地（省）" prop="hjszdsheng">
            <el-select v-model="form.hjszdsheng" placeholder="请选择开户行省份">
              <el-option v-for="item in options.province" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍地（市）" prop="hjszdshi">
            <el-input v-model="form.hjszdshi" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出户籍地（区县）" prop="hjszdqx">
            <el-input v-model="form.hjszdqx" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍地（详细）" prop="hjszdxxdz">
            <el-input v-model="form.hjszdxxdz" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="常住地（省）" prop="jcjzdxsheng">
            <el-select v-model="form.jcjzdxsheng" placeholder="请选择开户行省份">
              <el-option v-for="item in options.province" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="常住地（市）" prop="jcjzdshi">
            <el-input v-model="form.jcjzdshi" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="常住地（区县）" prop="jcjzdqx">
            <el-input v-model="form.jcjzdqx" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="常住地（详细）" prop="jcjzdxxdz">
            <el-input v-model="form.jcjzdxxdz" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="联系地址（省）" prop="lxdzssheng">
            <el-select v-model="form.lxdzssheng" placeholder="请选择开户行省份">
              <el-option v-for="item in options.province" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系地址（市）" prop="lxdzshi">
            <el-input v-model="form.lxdzshi" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系地址（区县）	" prop="lxdzqx">
            <el-input v-model="form.lxdzqx" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系地址（详细）	" prop="lxdzxxdz">
            <el-input v-model="form.lxdzxxdz" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="华侨、港澳台、外籍个人信息（带*必填）"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="涉税事由" prop="sssy">
            <el-select v-model="form.sssy" placeholder="请选择">
              <el-option v-for="item in options.TaxReason" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生国家(地区)" prop="csgj">
            <el-select v-model="form.csgj" placeholder="请选择出生国家" filterable>
              <el-option v-for="item in options.Country" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="首次入境时间" prop="scrjsj">
            <el-date-picker v-model="form.scrjsj" type="date" placeholder="请选择首次入境时间" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计离境时间" prop="yjljsj">
            <el-date-picker v-model="form.yjljsj" type="date" placeholder="请选择预计离境时间" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他证件类型" prop="qtzjlx">
            <el-input v-model="form.qtzjlx" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他证件号码" prop="qtzjhm">
            <el-input v-model="form.qtzjhm" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label=备注 prop="remark">
            <el-input v-model="form.remark" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="operating" :gutter="5">
      <el-col :offset="19" :span="5">
        <el-button type="primary" size="large" :loading="show.saving" @click="onSubmit()">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { resolve } from "@/utils/identity";
import { yesno, bank, province, Country } from '@/data/common'
import { sex, status, type, disabilityType, TaxReason, state, OccupationType } from "@/data/employee";

export default {
  data() {
    return {
      id: null,
      loading: false,
      form: {},
      show: {
        saving: false,
      },
      exemption: {},
      rules: {
        name: [
          {required: true, message: '请输入名称'}
        ]
      },
      options: {
        sex, type, status, bank, province, yesno, disabilityType, TaxReason, state, OccupationType, Country
      },
      error: {
        type: ''
      }
    }
  },
  mounted() {
    const digest = this.$route.params.digest;
    if (digest) {
      this.$API.employee.information.detail.get(digest).then(res => {
        if (res.success) return res.data;
        return this.$API.employee.detail.get(digest).then(res => {
          if (res.success) {
            const {name, type, identity, digest, email, birthday, mobile, sex} = res.data;
            return {name, type, identity, digest, email, birthday, mobile, sex};
          }
        })
      }).then(form => {
        this.form = form
        this.initForm();
      })
    }
  },
  methods: {
    onSubmit() {
      this.$refs.FormHandle.validate(async (valid) => {
        if (valid) {
          this.saving = true;
          let res = await this.$API.employee.information.create.post(this.form);
          this.show.saving = false;
          if (res.success) {
            this.$message.success("保存成功")
            this.$router.push({name: "information", replace: true})
          } else {
            this.$alert(res.message, "提示", {type: 'error'})
          }
        }
      })
    },
    initForm() {
      if (this.form.birthday) {
        this.form.birthday = dayjs(this.form.birthday).format('YYYY-MM-DD')
      }
    },
    onIdentity(value) {
      if (value && value.length === 18) {
        const res = resolve(value);
        if (res.success) {
          this.form.type = '居民身份证';
          this.form.birthday = res.born;
          this.form.sex = this.options.sex[res.sex];
        }
        this.error.type = res.success ? '' : res.message;
      }
    },

  }
}
</script>

<style lang="less" scoped>

</style>
